<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="logo"><img src="./images/logo.png" alt=""></div>
    <div class="nav-warp">
        <div class="nav center">
            <div class="nav-list"><a href="#">首页</a></div>
            <div class="nav-list"><a href="./pages/classft.html">分类</a></div>
            <div class="nav-list"><a href="./pages/bag.html">购物袋</a></div>
            <div class="nav-list"><a href="./pages/story.html">品牌故事</a></div>
            <div class="nav-list"><a href="./pages/contact.html">联系我们</a></div>
            <div class="nav-list"><a href="./pages/login.html">登录</a></div>
        </div>

    </div>
    <div class="banner">
        <div class="center">
            <p>GlowGuard是一家专注于护肤产品的公司，致力于为顾客提供高品质的面霜和护肤解决方案。我们以独特的配方和先进的科技为基础，为用户提供日常护理所需的滋润和保护，以促进肌肤的健康和光彩。</p>
        </div>
    </div>
    <main>
        <ul class="yhq center">
            <li class="zhong">优惠券</li>
            <li><span>20￥</span>
                <p>满200￥可用</p>
            </li>
            <li><span>50￥</span>
                <p>满300￥可用</p>
            </li>
            <li><span>200￥</span>
                <p>满1500￥可用</p>
            </li>
        </ul>
        <div class="img-a center">
            <div class="img-a-left">
                <img src="./img/1.png" alt="">
            </div>
            <div class="img-a-right">
                <img src="./img/2.jpg" alt="">
                <img src="./img/3.png" alt="">
            </div>
        </div>
        <h2>推荐新品</h2>
        <ul class="phone center">
            <li>
                <div class="phone-img"><img src="./images/index/1.jpg" alt=""></div>
                <div class="phone-text">
                    <h3>[弹霜]焕颜弹力日晚霜</h3>
                    <span>1660.00￥</span>
                    <p>胶原回弹 紧致饱满</p>
                    <div class="btn-a"><a href="#">购买</a></div>
                </div>
            </li>
            <li>
                <div class="phone-text">
                    <h3>[月光宝瓶]至臻凝时面霜</h3>
                    <span>￥2800.00</span>
                    <p>紧致饱满 光润若新</p>
                    <div class="btn-a"><a href="#">购买</a></div>
                </div>
                <div class="phone-img"><img src="./images/index/2.jpg" alt=""></div>
            </li>
        </ul>
        <h2>热门爆款</h2>
        <ul class="phone center">
            <li>
                <div class="phone-img"><img src="./images/index/3.jpg" alt=""></div>
                <div class="phone-text">
                    <h3>[空气面霜] 沁润奇肌保湿乳霜/凝露/滋养霜</h3>
                    <img src="./img/11.png" alt="">
                    <span>510.00￥</span>
                    <p>长效蓄水锁水 肌肤轻盈呼吸</p>
                    <div class="btn-a"><a href="#">购买</a></div>

                </div>
            </li>
            <li>
                <div class="phone-text">
                    <h3>奢华至臻面霜</h3>
                    <span>799￥</span>
                    <img src="./img/7.png" alt="">
                    <p>Luxury Time-Inverse Recovery Cream</p>
                    <div class="btn-a"><a href="#">购买</a></div>
                </div>
                <div class="phone-img"><img src="./images/index/10.png" alt=""></div>
            </li>
        </ul>
        <h2>更多</h2>
        <div class="bjb-warp">
            <ul class="center">
                <li>
                    <img src="./images/index/11.png" alt="">
                    <h4>奢华鱼子新肌焕活面霜</h4>
                    <div class="btn-a"><a href="#">加入购物车</a></div>
                </li>
                <li>
                    <img src="./images/index/12.png" alt="">
                    <h4>奢华养肤黑霜</h4>
                    <div class="btn-a"><a href="#">加入购物车</a></div>
                </li>
                <li>
                    <img src="./images/index/13.png" alt="">
                    <h4>奢华塑颜紧致面霜</h4>
                    <div class="btn-a"><a href="#">加入购物车</a></div>
                </li>
            </ul>
        </div>
        <div class="search"><input type="search" name="" id="" placeholder="请输入关键词"></div>
    </main>
    <footer>
        <div class="footer-box">
            <div class="footer-img"> <img src="./images/logo.png" alt=""></div>
           <p>释放自然光辉，呵护你的肌肤之美。</p>
        </div>
    </footer>
</body>

</html>